  //邀请好友
  <template>
    <view class="popularize-friend-content">
      <view class="popularize-hint-content">
        <text class="hint-01">省钱吃鸡 分享赚钱</text>
        <text class="hint-02">— 分享美食 还能再返现 —</text>
      </view>

      <view class="popularize-img-content">
        <text class="img-hint">邀请好友一起 天天有钱赚</text>
        <view class="qr-content">
          <!--          <image class="qr-img-value" src="../static/uni.png" mode="aspectFill"></image> -->
          <uqrcode ref="uqrcode" canvas-id="qrcode" :value="qrUrl" :size="120" type="2d" :hide="isQrHide"></uqrcode>

        </view>
      </view>

      <view class="popularize-bt-content">
        <view class="bt-invite">
          <uni-icons type="weixin" size="30"></uni-icons>
          <text class="bt-margin-left">立即邀请</text>
        </view>

        <view class="bt-save-qr" @click="handleSave">
          <uni-icons fontFamily="iconfont" size="30" color="#FFDD83">{{`&#xe630;`}}</uni-icons>
          <text class="bt-margin-left">保存二维码</text>
        </view>

      </view>

    </view>
    <view class="rule-bt-content" @click="togglePopup('center')">
      <text>?</text>
    </view>

    <view>
      <!-- 普通弹窗 -->
      <uni-popup ref="popupRef" borderRadius="10rpx" background-color="#fff" @change="popupChange"
        style="z-index: 9999;">
        <view class="rule-content">
          <view class="rule-title-content">
            <text class="rule-title">佣金规则</text>
          </view>
          <view class="rule-item-content">
            <!-- <rich-text :nodes=""></rich-text> -->
            <text>1、渠道佣金：通过邀请好友或分享商品注册成为会员，如该会员促成订单，会获得商家设定的渠道佣金；
            </text>
            <text>2、分销佣金：分享商品链接或图片海报，直接促成订单，会获得商家设定的分销佣金。</text>
          </view>
        </view>
      </uni-popup>
    </view>
  </template>

  <script lang="ts" setup>
  import { ref, getCurrentInstance } from "vue";
  import { onReady, onLoad } from '@dcloudio/uni-app';


  onLoad(() => {

  })
  onReady(() => {
    console.log('onReady--')
    let global = getApp().globalData
    let info = uni.getStorageSync(global.USER_INFO_TAG)
    let device = uni.getStorageSync(global.DEVICE_SN_TAG)
    qrUrl.value = `https://api.saiyaoyun.com/mini?fixed=1&sn=${device}&rid=${info.object_id}`
  })

  const qrUrl = ref("")
  const isQrHide = ref(false)

  const { proxy } = getCurrentInstance()
  function popupChange(state) {
    console.log("弹窗状态", state)
    if (!state.show) {
      isQrHide.value = false
    }
  }

  function togglePopup(type) {
    // popupRef.value.type = type
    // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性

    // console.log("点击展示弹窗")
    isQrHide.value = true
    proxy.$refs.popupRef.open(type)
  }

  function handleSave() {
    proxy.$refs.uqrcode.toTempFilePath({
      success: res => {
        console.log("二维码临时文件地址:", res);
        proxy.$refs.uqrcode.save({
          success: () => {
            uni.showToast({
              icon: 'success',
              title: '保存成功'
            });
          }
        });
      }
    });

  }
  </script>

  <style lang="scss">
    .popularize-friend-content {
      position: relative;
      width: 100%;
      height: 100%;
      background-size: 100% 100%;
      background-image: url('https://os.saiyaoyun.com/static/shop-mini/popularize_bg.png');
      background-size: 100% 100%;
      background-position: center;
      /* 确保图片居中 */
      background-repeat: no-repeat;
      /* 防止图片重复 */
    }

    .popularize-hint-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      color: #fff;

      .hint-01 {

        padding: 40rpx 0;
        font-size: 70rpx;
      }

      .hint-02 {
        font-size: 30rpx;
        font-weight: 700;
      }


    }


    .popularize-img-content {
      position: absolute;
      top: 31%;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      height: 28%;
      // border: 1px solid #000;

      .img-hint {
        padding: 20rpx 0;
        color: #F4291C;
        font-size: 30rpx;
      }

      .qr-content {
        position: relative;
        width: 240rpx;
        height: 240rpx;
        // padding: 20rpx;
        // border-style: dashed;
        // border-width: 2rpx;
        // border-color: #000;
        // border: 2px dashed‌ #000;
        // background: blue;

        .qr-img-value {
          width: 50rpx;
          height: 50rpx;
        }
      }
    }

    .popularize-bt-content {
      position: absolute;
      top: 62%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 19%;
      padding: 15rpx 0;
      // border: 1px solid #ff0;
      box-sizing: border-box;

      .bt-invite {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 60%;
        height: 90rpx;
        border-radius: 50rpx;
        background: #FFDD83;
        color: #850E00;

      }

      .bt-save-qr {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 60%;
        height: 90rpx;
        background: linear-gradient(270deg, #F4281B 0%, #F6512D 100%);
        border-radius: 50rpx;
        color: #FFDD83;

      }

      .bt-margin-left {
        margin-left: 20rpx;
        font-weight: 700;
      }

    }

    .rule-bt-content {
      position: absolute;
      right: 10rpx;
      top: 10rpx;
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
      border: 1px solid #fff;
      border-radius: 30rpx;
      color: #fff;
      font-size: 25rpx;
    }

    .rule-content {
      width: 650rpx;
      height: 400rpx;
      border-radius: 40rpx;
      background: #fff;
      z-index: 9999;

      .rule-title-content {
        display: inline-flex;
        justify-content: center;
        width: 100%;

        .rule-title {
          width: 240rpx;
          line-height: 70rpx;
          text-align: center;
          border-radius: 0 0 10rpx 10rpx;
          background: linear-gradient(270deg, #FF9460 0%, #FF4C26 100%);
          color: #fff;
          font-size: 35rpx;
        }
      }

      .rule-item-content {
        display: flex;
        flex-direction: column;
        padding: 20px;
        font-size: 25rpx;
      }

    }
  </style>